iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

Scratch 3 從入門到精通系列 第 42

Day42 ( 遊戲設計 ) 九宮挌拼圖

  • 分享至 

  • xImage
  •  

九宮挌拼圖

教學原文參考:九宮挌拼圖

這篇文章會介紹,如何在 Scratch 3 裡使用變數、清單、多個角色、重複、滑行、廣播訊息和數學計算...等積木,實作一個九宮挌拼圖的小遊戲。

相關文章參考:變數清單重複廣播訊息滑行數學計算

角色設定

在角色編輯區,刪除貓咪角色,使用繪畫,繪製新角色 ( 參考:造型與繪圖 )。

Scratch 3 教學 - 九宮挌拼圖

使用方形工具,畫出一個正方形 ( 鍵盤 shift 鍵按著畫,可以畫出正方形 ),將角色命名為 move。

Scratch 3 教學 - 九宮挌拼圖

複製 move 腳色,將名稱改成 box1。

hScratch 3 教學 - 九宮挌拼圖

將 box1 造型裡的正方形,改成白底黑框的正方形,並用文字工具在中間輸入數字 1。

Scratch 3 教學 - 九宮挌拼圖

複製七次造型,分別將複製出的七個造型,改成 2~8 的數字。

Scratch 3 教學 - 九宮挌拼圖

積木程式原理 ( move 角色 )

點擊 move 角色,建立「方塊、空格、ax、ay、n、ox、oy」七個變數以及「過關、檢查、list」三個清單,個別說明如下圖所示:

Scratch 3 教學 - 九宮挌拼圖

設計點擊綠旗的程式,一開始先讓變數和清單都是初始狀態:

  • 將 move 角色圖層移到最下層
  • 變數 n 設為 1。
  • 變數方塊設為 0。
  • 變數空格設為 9。
  • 將三個清單的內容都清空。

Scratch 3 教學 - 九宮挌拼圖

接續上方的積木,將三個清單放入指定數值 ( 產生的清單內容如下圖所示 ):

  • 使用「重複次數」積木,重複 8 次 ( 因為有八張數字卡牌 )。
  • 每次重複,將 n 加到「list」和「過關」
  • 每次重複,將 0 加到「檢查」
  • 每次重複,將 n 的數值增加 1
  • 重複結束後,將 9 加到「過關」和「檢查」

Scratch 3 教學 - 九宮挌拼圖

接續上方積木,使用「重複 20 次」積木,每次重複將 list 的第一個項目,隨機插入後方的位置,接著移除第一個項目,就能將 list 的內容打亂,打亂完成後,廣播「ready」的訊息。

Scratch 3 教學 - 九宮挌拼圖

因為所有角色都會收到廣播的 ready 訊息,當收到 ready 訊息後,將 move 角色定位到九宮格的右下角,並將變數 ox 和 oy 設定為 move 角色的 x 座標與 y 座標

Scratch 3 教學 - 九宮挌拼圖

接著設計收到訊息「move」的程式 ( 待會數字方塊移動後,會發送 move 訊息 ):

  • 收到 move 訊息後,滑行到 ax 和 ay 的位置 ( ax 和 ay 會在點擊數字方塊時改變 )。
  • 滑行結束後,將 ox 和 oy 設定為新的座標。
  • 使用「清單替換」的積木,將「檢查」清單裡的空格和方塊位置對調。
    • 將「空格」所在的位置設為 0
    • 將「方塊」的所在位置設為「空格」
    • 將 0 的所在位置設為「方塊」
  • 最後判斷如果「檢查」等於「過關」,就說出「完成」。

Scratch 3 教學 - 九宮挌拼圖

積木程式原理 ( 數字方塊角色 )

點擊角色 box1,編輯「數字方塊」角色的程式:

  • 當收到 ready 訊息時。
  • 將造型換成 list 清單的第一個項目
  • 變更造型後,移除 list 清單的第一個項目 ( 確保和其他方塊不會重複 )。
  • 將第一個方塊定位到九宮格的左上角。
  • 將「檢查」清單的第一個項目設定為造型編號

Scratch 3 教學 - 九宮挌拼圖

設計當方塊角色被點擊的程式:

  • 將 ax 和 ay 設定為點擊角色的 x、y 座標。
  • 使用邏輯判斷,判斷方塊和空格是否相鄰
    • 如果相鄰,則水平 ( ax - ox 的絕對值 ) 和垂直 ( ay - oy 的絕對值 ) 數值加總,會小於某個數值 ( 範例為 110 )
    • 如果相鄰,讓變數「方塊」等於造型編號。
    • 廣播 move 訊息,表示這個方塊準備移動。
    • 將方塊滑行到 ox、oy 的位置 ( 空格處 )

Scratch 3 教學 - 九宮挌拼圖

複製七個 box1 角色,名稱分別是 box2~box8。

Scratch 3 教學 - 九宮挌拼圖

將複製的角色,參照下圖修改積木對應的數值。

Scratch 3 教學 - 九宮挌拼圖

最後,將空格的顏色改成全白。

Scratch 3 教學 - 九宮挌拼圖

完成效果

完成後,點擊綠旗,就可以開始進行九宮格拼圖的遊戲。

Scratch 3 教學 - 九宮挌拼圖

範例解答

範例解答:九宮挌拼圖

延伸練習

如果已經熟悉了九宮挌拼圖的原理,還可以嘗試更多好玩的作法:

  • 沿用範例程式,增加「雲端變數」,紀錄最快過關的步數。( 解答 )

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day41 ( 遊戲設計 ) 翻翻卡 ( 卡牌記憶 )
下一篇
Day43 ( 遊戲設計 ) 音階記憶遊戲
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言